<template>
  <tm-app>
    <TabBarPageWrapper :use-custom-nav-bar="false">
      <view class="user-bg flex flex-col" :class="store.tmStore.dark ? 'bg-dark' : 'bg-light'">
        <view style="height: 44px"></view>
        <view class="flex flex-around fulled fulled-height flex-between-top-center">
          <view class="flex flex-row flex-row-center-center flex-1">
            <tm-avatar
                :img="userInfo?.avatar"
                :round="26"
                :size="135"
                color="orange"
                @click="navigateTo(PageEnum.AVATAR_UPLOAD_PAGE)"
            ></tm-avatar>
            <view class="flex flex-col flex-col-left-center ml-10">
              <tm-text
                  :label="userInfo?.nickName"
                  :fontSize="35"
                  class="text-weight-b ma-5"
              ></tm-text>
              <tm-text
                  :label="'账号: ' + userInfo?.userName"
                  :fontSize="28"
                  color="#444444"
                  class="ma-5"
              ></tm-text>
            </view>
          </view>
          <!-- 这里仅仅是占位使用 用于控制间距 -->
          <view class="flex-2"></view>
          <view class="flex flex-row fulled-height flex-row-center-center flex-1">
            <tm-button
                size="small"
                :margin="[10]" :shadow="0" text outlined
                :round="10"
                @click="navigateTo(PageEnum.USER_INFO)"
                :label="language$t('user.index.userinfo')"
            ></tm-button>
          </view>
        </view>
      </view>
      <view class="main">
        <tm-sheet :border="1" :padding="[20]" :margin="[10, 10]" :round="3">
          <tm-text
              :font-size="24"
              _class="text-weight-b"
              :label="language$t('user.index.modify.title')"
          ></tm-text>
          <tm-divider color="grey-1" :border="3"></tm-divider>
          <tm-grid :width="680" :col="4">
            <tm-grid-item :height="120" :url="PageEnum.AVATAR_UPLOAD_PAGE">
              <tm-icon name="tmicon-wind-smile" color="yellow" :font-size="42"></tm-icon>
              <tm-text
                  _class="pt-10"
                  :font-size="22"
                  :label="language$t('user.index.avatar.modify')"
              ></tm-text>
            </tm-grid-item>
            <tm-grid-item :height="120" :url="PageEnum.MESSAGE_PAGE" :count="unreadCount">
              <tm-icon name="tmicon-mail" color="blue" :font-size="42"></tm-icon>
              <tm-text
                  _class="pt-10"
                  :font-size="22"
                  :label="language$t('user.index.notify')"
              ></tm-text>
            </tm-grid-item>
            <tm-grid-item :height="120" :url="PageEnum.USER_MODIFY">
              <tm-icon name="tmicon-account" color="green" :font-size="42"></tm-icon>
              <tm-text
                  _class="pt-10"
                  :font-size="22"
                  :label="language$t('user.index.userinfo.modify')"
              ></tm-text>
            </tm-grid-item>
            <tm-grid-item :height="120" :url="PageEnum.USER_EDITPASSWORD">
              <tm-icon name="tmicon-lock" color="orange" :font-size="42"></tm-icon>
              <tm-text
                  _class="pt-10"
                  :font-size="22"
                  :label="language$t('user.index.password.modify')"
              ></tm-text>
            </tm-grid-item>
          </tm-grid>
        </tm-sheet>
        <tm-sheet :border="1" :padding="[0]" :margin="[10, 10]" :round="3">
<!--          <tm-cell-->
<!--              bottom-border-->
<!--              :margin="[10, 0]"-->
<!--              :title="language$t('user.index.language.switch')"-->
<!--              :right-text="language$t('language')"-->
<!--              @click="switchLanguage"-->
<!--          >-->
<!--          </tm-cell>-->
          <tm-cell
              :margin="[10, 0]"
              :title="language$t('user.index.theme.auto')"
              :bottom-border="!store.tmuiConfig.autoDark"
          >
            <template #right>
              <tm-switch
                  linear="left"
                  linearDeep="accent"
                  color="teal"
                  :margin="[12, 0]"
                  :default-value="store.tmuiConfig.autoDark"
                  @change="setAutoDark"
              ></tm-switch>
            </template>
          </tm-cell>
          <tm-cell
              v-if="!store.tmuiConfig.autoDark"
              :margin="[10, 0]"
              :title="language$t('user.index.theme.dark')"
          >
            <template #right>
              <tm-switch
                  linear="left"
                  linearDeep="accent"
                  color="teal"
                  :margin="[12, 0]"
                  :default-value="store.tmStore.dark"
                  @change="setDark"
              ></tm-switch>
            </template>
          </tm-cell>
          <tm-cell
              :margin="[10, 0]"
              :title="language$t('message.notification')"
              @click="openNotificationSettings"
          >
          </tm-cell>
          <tm-cell
              :margin="[10, 0]"
              :title="language$t('message.battery.optimization')"
              @click="openBatteryOptimizationSettings"
          >
          </tm-cell>
<!--          <tm-cell-->
<!--              :margin="[10, 0]"-->
<!--              :title="language$t('message.app.autostart')"-->
<!--              @click="setAutoStart"-->
<!--          >-->
<!--          </tm-cell>-->
          <tm-cell
              :margin="[10, 0]"
              :title="language$t('message.float.window.permission')"
              @click="openOverlaySettings"
          >
          </tm-cell>
        </tm-sheet>
<!--        <tm-sheet :border="1" :padding="[0]" :margin="[10, 10]" :round="3">-->
<!--          <tm-cell-->
<!--              bottom-border-->
<!--              :margin="[10, 0]"-->
<!--              :title="language$t('user.index.links')"-->
<!--              @click="navigateTo(PageEnum.LINKS_PAGE)"-->
<!--          ></tm-cell>-->
<!--          <tm-cell-->
<!--              bottom-border-->
<!--              :margin="[10, 0]"-->
<!--              :title="language$t('user.index.common.problems')"-->
<!--              @click="navigateTo(PageEnum.COMMON_PROBLEMS_PAGE)"-->
<!--          ></tm-cell>-->
<!--          <tm-cell-->
<!--              :margin="[10, 0]"-->
<!--              :title="language$t('user.index.about')"-->
<!--              @click="navigateTo(PageEnum.ABOUT_PAGE)"-->
<!--          ></tm-cell>-->
<!--        </tm-sheet>-->
        <!-- 退出登录按钮 -->
        <view class="ml-10 mr-10">
          <tm-button
              block
              color="blue"
              font-color="white"
              linear="left"
              :label="language$t('user.logout.button.text')"
              @click="userStore.confirmLogOut"
          ></tm-button>
        </view>
      </view>
    </TabBarPageWrapper>
  </tm-app>
</template>

<script setup lang="ts">
import {PageEnum} from '@/enums/pageEnum';
import {useUserStore} from '@/store/modules/user';
import {storeToRefs} from 'pinia';
import {navigateTo} from '@/utils/page';
import {useNotifyStore} from '@/store/modules/notify';
import TabBarPageWrapper from '@/components/TabBarPageWrapper/index.vue';
import {language$t} from '@/tmui/tool/lib/language';
import {useTheme} from '@/common/useTheme';
import {onLaunch, onLoad} from "@dcloudio/uni-app";
import {ref} from "vue";
const linAlive = uni.requireNativePlugin("Lin-Alive");

const {store, setAutoDark, setDark} = useTheme();

/**
 * 消息通知
 */
const notifyStore = useNotifyStore();
const {unreadCount} = storeToRefs(notifyStore);

/**
 * 用户信息
 */
const userStore = useUserStore();
const {userInfo} = storeToRefs(userStore);
const notificationFlag = ref(false);

function switchLanguage() {
  const currentLanguage = uni.getLocale();
  console.log(`当前语言: ${currentLanguage}`);
  if (currentLanguage === 'zh-Hans') {
    uni.setLocale('en');
    return;
  }
  if (currentLanguage === 'en') {
    uni.setLocale('zh-Hans');
    return;
  }
}
function openNotificationSettings() {
  linAlive.openNotificationSettings((res: any) => {
    console.log("打开通知设置页面", res);
  });
}
function openBatteryOptimizationSettings() {
  linAlive.openBatteryOptimizationSettings((res: any) => {
    console.log("打开电池优化应用设置页面: " + JSON.stringify(res));
  });
}
function setAutoStart() {
  linAlive.setAutoStart((res: any) => {
    console.log("自启动管理: " + JSON.stringify(res));
  });
}
function openOverlaySettings() {
  linAlive.openOverlaySettings((res: any) => {
    console.log("打开悬浮窗设置页面: " + JSON.stringify(res));
  });
}
</script>

<style lang="less" scoped>
.user-bg {
  width: 100%;
  height: 360rpx;
}

.bg-light {
  background-color: #017dfc;
  background-image: linear-gradient(90deg, #017dfc 0%);
}

.bg-dark {
  background-color: #fa8bff;
  background-image: linear-gradient(45deg, #fa8bff 0%, #2bd2ff 52%, #2bff88 90%);
}
</style>
